<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2023-08-17 18:27:47
 * @LastEditTime: 2024-03-26 17:05:16
 * @LastEditors:  Please set LastEditors
-->
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { onLoad, onShow, onReady, onReachBottom } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, orderApi } from '@/api'
import { getImgFullPath, getDistance, dateFormat } from '@/utils/index'
import { useUserStore, useConfigStore } from '@/store'

const userStore = useUserStore()
const configStore = useConfigStore()
const pageTitle = ref('用户推广统计')
const viewData = reactive({
    recommendDepartment: {},
    recommendShop: {},
    recommendUser: {}
})
async function getUserStatisticsUserInfo() {
    uni.showLoading()
    const { data } = await orderApi.userStatisticsUserInfo({ userId: userStore.userInfo?.id }).finally(() => {
        uni.hideLoading()
    })
    for (const key in viewData) {
        data[key] && (viewData[key] = data[key])
    }
}
function goUrlFn(url: any) {
    if (url) {
        uni.navigateTo({
            url
        })
    }
}
onLoad((option) => {
    getUserStatisticsUserInfo()
})

</script>
<template>
    <hy-nav-bar :title="pageTitle" v-if="!configStore.isWeChatBrowser"></hy-nav-bar>
    <view class="container">
        <u-cell-group :border="false">
            <u-cell-item title="用户推广统计" hover-class="cell-hover-class" :arrow="true"
                :title-style="{ fontWeight: 'bold', color: '#000' }"
                @click="goUrlFn(`/packageA/pages/myRecommend/userList`)">
            </u-cell-item>
            <view class="con">
                <view>
                    <view> {{ viewData.recommendUser?.todayCount || 0 }}</view>
                    <view>今日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendUser?.yesterdayCount || 0 }}</view>
                    <view>昨日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendUser?.monthCount || 0 }}</view>
                    <view>本月新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendUser?.totalCount || 0 }}</view>
                    <view>总数</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendUser?.todayMoney || 0 }}</view>
                    <view>今日销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendUser?.yesterdayMoney || 0 }}</view>
                    <view>昨日销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendUser?.monthMoney || 0 }}</view>
                    <view>本月销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendUser?.totalMoney || 0 }}</view>
                    <view>总销量</view>
                </view>
            </view>
        </u-cell-group>
        <u-cell-group :border="false">
            <u-cell-item title="商户推广统计" hover-class="cell-hover-class" :arrow="true"
                :title-style="{ fontWeight: 'bold', color: '#000' }"
                @click="goUrlFn(`/packageA/pages/myRecommend/shopList`)">
            </u-cell-item>
            <view class="con">
                <view>
                    <view>{{ viewData.recommendShop?.todayCount || 0 }}</view>
                    <view>今日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendShop?.yesterdayCount || 0 }}</view>
                    <view>昨日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendShop?.monthCount || 0 }}</view>
                    <view>本月新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendShop?.totalCount || 0 }}</view>
                    <view>总数</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendShop?.todayMoney || 0 }}</view>
                    <view>今日销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendShop?.yesterdayMoney || 0 }}</view>
                    <view>昨日销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendShop?.monthMoney || 0 }}</view>
                    <view>本月销量</view>
                </view>
                <view>
                    <view>￥{{ viewData.recommendShop?.totalMoney || 0 }}</view>
                    <view>总销量</view>
                </view>
            </view>
        </u-cell-group>
        <u-cell-group :border="false" :arrow="false" >
            <u-cell-item title="事业部推广统计" hover-class="cell-hover-class" :arrow="false"
                :title-style="{ fontWeight: 'bold', color: '#000' }" @click="goUrlFn(``)">
            </u-cell-item>
            <view class="con">
                <view>
                    <view>{{ viewData.recommendDepartment?.todayCount || 0 }}</view>
                    <view>今日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendDepartment?.yesterdayCount || 0 }}</view>
                    <view>昨日新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendDepartment?.monthCount || 0 }}</view>
                    <view>本月新增</view>
                </view>
                <view>
                    <view>{{ viewData.recommendDepartment?.totalCount || 0 }}</view>
                    <view>总数</view>
                </view>
                <!-- <view>
                    <view></view>
                    <view>今日销量</view>
                </view>
                <view>
                    <view></view>
                    <view>昨日销量</view>
                </view>
                <view>
                    <view></view>
                    <view>本月销量</view>
                </view>
                <view>
                    <view></view>
                    <view>总销量</view>
                </view> -->
            </view>
        </u-cell-group>
    </view>
</template>

<style lang="scss" scoped>
@import '@/styles/helper.scss';

.container {
    padding: 20rpx;

    .cbtn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 26rpx;
        color: #007aff;
        gap: 10rpx;
    }

    .con {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 40rpx;

        &>view {
            width: 25%;
            height: 140rpx;
            box-sizing: border-box;
            padding: 20rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 10rpx;
        }
    }
}

:deep(.u-cell-box) {
    margin-bottom: 60rpx;
}

:deep(.u-cell-item-box) {
    border-radius: 5px;
}</style>
